<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="承载类型名称" style="margin-right:15px" label-width="120px" prop="name">
              <el-input v-model="form.name" placeholder="请输入承载类型名称" style="width:100%"  maxlength="100" :disabled="true"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="SKU种数" style="margin-right:15px" label-width="120px" prop="skuQuantity">
              <el-input v-model="form.skuQuantity" placeholder="请输入SKU种数" style="width:100%" maxlength="11"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="托数" style="margin-right:15px" label-width="120px" prop="quantity">
              <el-input v-model="form.quantity" placeholder="请输入托数" style="width:100%" maxlength="11"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="数量" style="margin-right:15px" label-width="120px" prop="num">
              <el-input v-model="form.num" placeholder="请输入数量" style="width:100%" maxlength="18"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="重量" style="margin-right:15px" label-width="120px" prop="weight">
              <el-input v-model="form.weight" placeholder="请输入重量" style="width:50%" maxlength="18"  show-word-limit/> KG
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="体积" style="margin-right:15px" label-width="120px" prop="volume">
              <el-input v-model="form.volume" placeholder="请输入体积" style="width:50%" maxlength="18" show-word-limit/> M³
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="备注" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.remarks" placeholder="请输入备注" style="width:100%" maxlength="100"  show-word-limit/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit"  :disabled="isDisable" plain>确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { locationBearTypeEdit,locationBearTypeDetail} from '@/api/basicInfo'
Vue.use(VXETable)
export default {
  props:{
    operationCode:{
      type: String,
      required: true
    }
  },
  data() {
    return {
      isDisable:false,   //确定键显示按钮

      form: {
        code:'',              //数据标识 ,
        name:'',              //类型名称 ,
        num:'',               //数量 ,
        quantity:'',          //托盘数量 ,
        remarks:'',           //备注 ,
        skuQuantity:'',       //SKU数量 ,
        status:'',            //状态 ,
        total:'',             //总数 ,
        volume:'',            //体积 ,
        weight:'',            //重量
      },
        rules: {
          name: [
            {required: true, message: '请输入承载类型名称', trigger: 'blur'},
          ],
          skuQuantity: [
            {required: true, message: '请输入SKU种数', trigger: 'blur'},
              {pattern: /^[1-9]\d*$/, message: 'SKU种数格式有误！', trigger: 'blur'}
          ],
          quantity: [
            {required: true, message: '请输入托盘数量', trigger: 'blur'},
              {pattern: /^[1-9]\d*$/, message: '托盘数量格式有误！', trigger: 'blur'}
          ],
          num: [
            {required: true, message: '请输入数量', trigger: 'blur'},
              {pattern: /^[1-9]\d*$/, message: '数量格式有误！', trigger: 'blur'}
          ],
          weight: [
            {required: true, message: '请输入重量', trigger: 'blur'},
            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '数量必须大于0' }
          ],
          volume: [
            {required: true, message: '请输入体积', trigger: 'blur'},
            { pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '体积必须大于0' }
          ],
        },
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 获取页面信息
    getInfo() {
      locationBearTypeDetail(this.operationCode).then(response => {
        this.form = response.data
      })
    },
    // 提交
    funcSubmit() {
      const data = this.form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isDisable = true
          locationBearTypeEdit(data).then(response => {
            this.$message({ message: response.msg, type: 'success' })
            this.$emit('fatherEditMethod')
            this.isDisable = false
          }).catch(() => this.isDisable = false)
        } else {
            return false
        }
      })

    },

    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    }

  }
}
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
  }
</style>
